const wFrame = document.querySelector('div#Frame div#Waypoint')

function Waypoint(){
    document.querySelector('button.NavigationBtn.mark[this]').removeAttribute('this');
    document.querySelector('button.NavigationBtn.mark#Waypoint').toggleAttribute('this');
    const children = document.querySelector('div#Frame').children;
    for (var i = 0; i < children.length; i++){
        if (children[i].id != 'nohide'){
            children[i].classList.add('hide');
        }
    }
    closeMenu();
    wFrame.classList.remove('hide');
}

function initWITop(){
    const divTop = document.createElement('div');
    divTop.className = 'top';
    //
    const h1 = document.createElement('h1');
    h1.className = 'pageTitle';
    h1.textContent = 'Waypoint';
    //
    const divPageRight = document.createElement('div');
    divPageRight.className = 'pageRight';
    //
    const btnRefetch = document.createElement('button');
    btnRefetch.className = 'refetch';
    btnRefetch.setAttribute('onclick', 'initWaypointInterface()');
    //
    const divContainerRefetch = document.createElement('div');
    divContainerRefetch.className = 'container';
    //
    const svgRefetch = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svgRefetch.setAttribute('class', 'icon')
    svgRefetch.setAttribute('viewBox', '0 0 1024 1024');
    svgRefetch.setAttribute('width', '24');
    svgRefetch.setAttribute('height', '24');
    //
    const pathRefetch1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    pathRefetch1.setAttribute('d', 'M395.776 641.664a19.392 19.392 0 0 0-6.368-12.384l-36.672-32.416a190.496 190.496 0 0 1 87.328-70.88c47.52-19.2 99.776-18.72 146.944 1.28s83.776 57.28 103.008 104.8a31.936 31.936 0 0 0 41.632 17.696 31.936 31.936 0 0 0 17.696-41.632 254.208 254.208 0 0 0-137.312-139.776 254.56 254.56 0 0 0-195.936-1.728 253.984 253.984 0 0 0-111.552 87.616l-37.408-33.088a19.168 19.168 0 0 0-31.808 16.384l12.576 119.68a19.2 19.2 0 0 0 21.088 17.088l109.696-11.52a19.2 19.2 0 0 0 17.088-21.12zM757.92 729.088l-109.216 15.36a19.2 19.2 0 0 0-9.536 33.856l34.496 28.416a190.816 190.816 0 0 1-236.672 74.016 190.592 190.592 0 0 1-102.976-104.768 32 32 0 1 0-59.36 23.936 254.272 254.272 0 0 0 137.344 139.776 255.232 255.232 0 0 0 100 20.48 255.744 255.744 0 0 0 95.904-18.752 254.592 254.592 0 0 0 115.872-93.408l41.408 34.112a19.2 19.2 0 0 0 31.2-17.472l-16.736-119.168a19.264 19.264 0 0 0-21.728-16.384z');
    pathRefetch1.setAttribute('p-id', '5928');
    //
    const pathRefetch2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    pathRefetch2.setAttribute('d', 'M808.192 262.592a320.16 320.16 0 0 0-592.352 0A238.592 238.592 0 0 0 32 496a240.32 240.32 0 0 0 130.976 213.888 32 32 0 1 0 29.12-57.024A176.192 176.192 0 0 1 96 496a175.04 175.04 0 0 1 148.48-173.888l19.04-2.976 6.24-18.24C305.248 197.472 402.592 128 512 128a256 256 0 0 1 242.208 172.896l6.272 18.24 19.04 2.976A175.04 175.04 0 0 1 928 496a176.128 176.128 0 0 1-96.128 156.896 32.064 32.064 0 0 0 29.12 57.024A240.416 240.416 0 0 0 992 496a238.592 238.592 0 0 0-183.808-233.408z');
    pathRefetch2.setAttribute('p-id', '5929');
    //
    svgRefetch.appendChild(pathRefetch1);
    svgRefetch.appendChild(pathRefetch2);
    divContainerRefetch.appendChild(svgRefetch);
    divContainerRefetch.innerHTML += 'Refetch';
    btnRefetch.appendChild(divContainerRefetch);
    //
    const btnNewWaypoint = document.createElement('button');
    btnNewWaypoint.id = 'newWaypoint';
    btnNewWaypoint.setAttribute('onclick', 'lyDialogType3()');
    //
    const divContainerNewWaypoint = document.createElement('div');
    divContainerNewWaypoint.className = 'container';
    //
    const svgNewWaypoint = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svgNewWaypoint.setAttribute('t', '1703786962991');
    svgNewWaypoint.setAttribute('class', 'icon')
    svgNewWaypoint.setAttribute('viewBox', '0 0 1024 1024');
    svgNewWaypoint.setAttribute('width', '24');
    svgNewWaypoint.setAttribute('height', '24');
    //
    const pathNewWaypoint = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    pathNewWaypoint.setAttribute('d', 'M993.28 460.8 819.2 460.8 819.2 286.72C819.2 256 798.72 256 768 256s-51.2 0-51.2 30.72L716.8 460.8l-174.08 0C512 460.8 512 481.28 512 512s0 51.2 30.72 51.2L716.8 563.2l0 174.08c0 30.72 20.48 30.72 51.2 30.72s51.2 0 51.2-30.72L819.2 563.2l174.08 0c30.72 0 30.72-20.48 30.72-51.2S1024 460.8 993.28 460.8zM378.88 460.8 30.72 460.8C0 460.8 0 481.28 0 512s0 51.2 30.72 51.2l348.16 0C409.6 563.2 409.6 542.72 409.6 512S409.6 460.8 378.88 460.8zM378.88 716.8 30.72 716.8C0 716.8 0 737.28 0 768s0 51.2 30.72 51.2l348.16 0C409.6 819.2 409.6 798.72 409.6 768S409.6 716.8 378.88 716.8zM378.88 204.8 30.72 204.8C0 204.8 0 225.28 0 256s0 51.2 30.72 51.2l348.16 0C409.6 307.2 409.6 286.72 409.6 256S409.6 204.8 378.88 204.8z');
    pathNewWaypoint.setAttribute('p-id', '2570');
    //
    svgNewWaypoint.appendChild(pathNewWaypoint);
    divContainerNewWaypoint.appendChild(svgNewWaypoint);
    divContainerNewWaypoint.innerHTML += 'New Waypoint';
    btnNewWaypoint.appendChild(divContainerNewWaypoint);
    //
    divPageRight.appendChild(btnRefetch);
    divPageRight.appendChild(btnNewWaypoint);
    //
    const divContent = document.createElement('div')
    divContent.className = 'content'
    //
    const divOverworld = document.createElement('div')
    divOverworld.className = 'aColomn';
    divOverworld.id = 'overworld';
    //
    const divNether = document.createElement('div')
    divNether.className = 'aColomn';
    divNether.id = 'nether';
    //
    const divTheEnd = document.createElement('div')
    divTheEnd.className = 'aColomn';
    divTheEnd.id = 'the_end';
    //
    divContent.appendChild(divOverworld);
    divContent.appendChild(divNether);
    divContent.appendChild(divTheEnd);
    // 
    divTop.appendChild(h1);
    divTop.appendChild(divPageRight);
    //
    return [divTop, divContent];
}

function generateWpCard(title, x, y, z, dim, addedBy, wid){
    const wpCard = document.createElement('div');
    wpCard.className = 'wpCard';
    wpCard.id = `w${wid}`;
    //
    const wpDiv = document.createElement('div');
    wpDiv.className = 'wpCardLeft';
    //
    const wpTitle = document.createElement('h3');
    wpTitle.className = 'wpTitle';
    wpTitle.textContent = title;
    wpDiv.appendChild(wpTitle);
    //
    const wpAddBy = document.createElement('span');
    wpAddBy.className = 'wpAddBy';
    wpAddBy.textContent = `(Add by ${addedBy})`;
    wpDiv.appendChild(wpAddBy);
    //
    wpDiv.appendChild(document.createElement('br'));
    wpDiv.appendChild(document.createElement('br'));
    //
    const wpX = document.createElement('span');
    wpX.className = 'wpX';
    wpX.textContent = `X: ${x}`
    wpDiv.appendChild(wpX);
    //
    const wpY = document.createElement('span');
    wpY.className = 'wpY';
    wpY.textContent = `Y: ${y}`
    wpDiv.appendChild(wpY);
    //
    const wpZ = document.createElement('span');
    wpZ.className = 'wpZ';
    wpZ.textContent = `Z: ${z}`
    wpDiv.appendChild(wpZ);
    //
    wpDiv.appendChild(document.createElement('br'));
    //
    const wpDim = document.createElement('span');
    wpDim.className = 'wpDim';
    wpDim.textContent = `Dim: ${dim}`
    wpDiv.appendChild(wpDim);
    //
    wpCard.appendChild(wpDiv);
    //
    const qfwButton = document.createElement('button');
    qfwButton.className = 'qfwButton';
    qfwButton.onclick = function(){
        lyDialogType1(1, title, addedBy, wid)
    }
    wpCard.appendChild(qfwButton);
    //
    const container = document.createElement('div');
    container.className = 'container';
    qfwButton.appendChild(container);
    //
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('t', '1703784750711');
    svg.setAttribute('class', 'icon')
    svg.setAttribute('viewBox', '0 0 1024 1024');
    svg.setAttribute('version', '1.1');
    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
    svg.setAttribute('p-id', '1511');
    svg.setAttribute('width', '24');
    svg.setAttribute('height', '24');
    container.appendChild(svg);
    //
    const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path1.setAttribute('d', 'M207.252251 346.508875l0 551.984666c0 30.377868 25.331945 54.835909 55.709813 54.835909l497.087359 0c30.377868 0 55.04671-24.459065 55.04671-54.835909L815.096133 346.508875 207.252251 346.508875zM373.027855 843.835687l-55.258535 0 0-387.833049 55.258535 0L373.027855 843.835687zM483.544925 843.835687l-54.235229 0 0-387.833049 54.235229 0L483.544925 843.835687zM595.0853 843.835687l-56.281841 0 0-387.833049 56.281841 0L595.0853 843.835687zM704.579063 843.835687l-55.258535 0 0-387.833049 55.258535 0L704.579063 843.835687z');
    path1.setAttribute('p-id', '1512');
    svg.appendChild(path1);
    //
    const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path2.setAttribute('d', 'M829.088822 180.733271 649.320529 180.733271 649.320529 111.438045c0-22.782889-18.376533-41.221844-41.159422-41.221844L414.849356 70.216201c-22.782889 0-41.821501 18.438954-41.821501 41.221844l0 69.295226L193.921641 180.733271c-22.782889 0-41.927925 18.385742-41.927925 41.168632l0 68.325132 718.360951 0 0-68.325132C870.354668 199.119013 851.872734 180.733271 829.088822 180.733271zM595.0853 180.733271l-165.775604 0 0-55.258535 165.775604 0L595.0853 180.733271z');
    path2.setAttribute('p-id', '1513');
    svg.appendChild(path2);
    //    
    const span = document.createElement('span');
    span.textContent = 'Remove';
    container.appendChild(span);
    //
    return wpCard;
}

function initWaypointInterface(){
    // Clear
    const wChildren = wFrame.children;
    Array.from(wChildren).forEach((child) => {
        wFrame.removeChild(child);
    });
    const [divTop, divContent] = initWITop();
    wFrame.appendChild(divTop);
    wFrame.appendChild(divContent)
    // Put
    callServer('/waypoint/getAllWaypoint', `updateUserID=${localStorage.getItem('ID')}`, null, 'GET')
        .then(response => {
            const resp = response[0]
            if(resp.length != 0 == true){
                const [overworld, nether, the_end] = [[], [], []]
                for(let u = 0; u < resp.length; u++){
                    const all = resp[u]
                    const name = all['name']
                    const x = all['x']
                    const y = all['y']
                    const z = all['z']
                    const dim = all['dim']
                    const addBy = all['ID']
                    const wid = all['wid']
                    if(dim == 'Overworld'){ overworld.push([name, x, y, z, dim, addBy, wid]) }
                    if(dim == 'Nether'){ nether.push([name, x, y, z, dim, addBy, wid]) }
                    if(dim == 'The End'){ the_end.push([name, x, y, z, dim, addBy, wid]) }
                }
                for(let u = 0; u < overworld.length; u++){
                    const [name, x, y, z, dim, addBy, wid] = overworld[u]
                    const wpCard = generateWpCard(name, x, y, z, dim, addBy, wid)
                    document.querySelector('div#Waypoint div.content div#overworld').appendChild(wpCard)
                }
                for(let u = 0; u < nether.length; u++){
                    const [name, x, y, z, dim, addBy, wid] = nether[u]
                    const wpCard = generateWpCard(name, x, y, z, dim, addBy, wid)
                    document.querySelector('div#Waypoint div.content div#nether.aColomn').appendChild(wpCard)
                }
                for(let u = 0; u < the_end.length; u++){
                    const [name, x, y, z, dim, addBy, wid] = the_end[u]
                    const wpCard = generateWpCard(name, x, y, z, dim, addBy, wid)
                    document.querySelector('div#Waypoint div.content div#the_end.aColomn').appendChild(wpCard)
                }
            } else {
                const p = document.createElement('p')
                p.innerHTML = 'No Waypoint . . .'
                p.style.color = 'var(--color-5)'
                wFrame.appendChild(p)
            }
        })
        .catch(status => {
            console.warn(`Request to server was rejected with HTTP Status: ${status}`)
            lyDialogType4(status)
        })
}

initWaypointInterface()